<!--
 * @userName: 湫之恋
 * @Author: Seven
 * @Date: 2020-07-01 15:38:52
 * @LastEditors: Seven
 * @LastEditTime: 2020-07-01 15:49:55
 -->
<template  >
  <div>
    <searchCarchAudit></searchCarchAudit>
    <el-table :data="carlist" border style="width: 100%">
      <el-table-column fixed prop="carname" align="center" label="品牌" width="150">
        <!-- <template slot-scope="scope">
          <div v-if="scope.row.carBool==='待出租'">{{scope.row.carBool}}</div>
        </template> -->
      </el-table-column>
      <el-table-column prop="carImage" label="图片" align="center" width="120">
        <template slot-scope="scope">
          <img :src="scope.row.carImage" style="width: 100px;height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" align="center" width="120"></el-table-column>
      <el-table-column prop="userId.name" label="车主" align="center" width="120"></el-table-column>
      <el-table-column prop="modelNumber" label="型号" align="center" width="120"></el-table-column>
      <el-table-column prop="licencePlate" label="车牌" align="center" width="120"></el-table-column>
      <el-table-column prop="displacement" label="排量" align="center" width="120"></el-table-column>
      <el-table-column prop="description" label="车辆描述" align="center" width="120"></el-table-column>
      <el-table-column prop="carBool" label="状态" align="center" width="120"></el-table-column>
      <el-table-column fixed="right" align="center" label="操作">
        <!-- <template slot-scope="scope">
          <el-button @click="handleClick(scope)" type="text" size="small">详情</el-button>
          <el-button type="text" @click="removeClick(scope)" size="small">审核</el-button>
        </template> -->
         <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.row._id)">编辑</el-button> -->
          <el-button type="text" @click="check(scope.row._id)">
            <el-button size="mini" type="danger">审核</el-button>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="paginationMain">
        <span @click="firstPage">首页</span>
        <span @click="previous">上一页</span>
        <span @click="mynextPage">下一页</span>
        <span @click="maxPage">尾页</span>
      </div>
    </div>
    <!-- <img :src="carlist[0].carImage" alt=""> -->
  </div>
</template>

<script>
import searchCarchAudit from "./searchCarch/searchCarchAudit";
import { createNamespacedHelpers } from "vuex";
var { mapActions, mapState,mapGetters } = createNamespacedHelpers("carAudit");
export default {
  components: {
    searchCarchAudit
  },
  data() {
    return {
      list: [{ name: "lsy", password: "123" }]
    };
  },
  created() {
    // this.getcaractions();
    this.getcaraudit()
  },
  methods: {
    ...mapActions(["getcaractions",'overleaf','pageup','trailer','homepage','getcaraudit','passCar','nopassCar']),
    //确认审核车辆
    check(id){
         this.$confirm("确认是否通过该车辆的上架申请?", "审核", {
           distinguishCancelAndClose: true,
        confirmButtonText: "通过",
        cancelButtonText: "不通过",
        type: "warning"
      })
        .then(() => {
          this.$message(
            {
              type: "success",
              message: "同意上架!"
            },
            this.passCar({id,carBool:'待出租'}),
            this.getcaraudit()
          );
        })
         .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '拒绝上架'
                : '取消审核'
            });
            action === 'cancel'
                ? this.shenhe(id)
                : ""
          });
    },
    //审核车辆
    shenhe(id){
          this.nopassCar({id,carBool:'不通过'}),
          this.getcaraudit()
    },
    handleClick(res) {
      console.log(res);
    },
    removeClick(res) {
      console.log(res);
    },
    firstPage() {//首页
      this.homepage()
    },
    previous() {//上页
      this.pageup()
    },
    mynextPage() {//点击下一页
      this.overleaf()
    },
    maxPage() {//尾页
      this.trailer()
    }
  },
  computed: {
    ...mapState(["carlist",'pages','yeshu']),
  }
};
</script>

<style>
.el-main[data-v-452a4712] {
  text-align: center !important;
}
.el-table td,
.el-table th {
  text-align: center !important;
}
.pagination{
  display:flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
}
.pagination .paginationMain {
  display: flex;
  justify-content: center;
  /* margin-top: 20px; */
}
.pagination .paginationMain span {
  display: block;
  width: 50px;
  height: 30px;
  border: 1px solid #999;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.pagination .paginationMain span:hover {
  border: 1px solid #f3a83f;
  color: #f3a83f;
}
</style>